<template>
  <div class="u_mh flex more recommend" ref="u_mh">
    <p class='recommendTitle'>热门推荐</p>
    <!-- 显示当前的漫画列表 -->
    <div class='mh_list'>
      <div class='mh_item' v-for="item in data">
        <router-link :to="{path:'/main/comicInfo',query:{comicId:item.href.replace(/\D/g,'')}}">
          <div class='thumbnail'>
            <img class='img' v-lazy:background-image="item.pic">
            <span class="score">{{item.score}}</span>
            <div class='mh_des'>
              <div class='text_sub'>{{item.title}}</div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .recommend {
    .recommendTitle {
      width: 100%;
      text-align: center;
      font-size: small;
      color: #2b7da7;
      background: #dcdcd6;
      padding: 10px 0;
    }

    .img {
      width: 100%;
      height: 100%;
      background-size: contain;
      background-position: center;
      background-color: white;
    }

    .mh_item .mh_des {
      height: 30px;
    }
  }

</style>
<script>
  export default {
    name: 'mh_recommend',
    props: {
      data: {
        type: Array,
        default: []
      }
    },
    computed: {}
  }

</script>

<style>
  /* @import "../../assets/iconfont/iconfont.css"; */

</style>
